<template>
	<view class="report-container">
		<view style="font-size: 34rpx; color: #020202; margin-top: 46rpx;">
			请选择要办理的类型
		</view>
		<view class="report-button-group">
			<template v-if="type == 'report' || !type">
				<view @click="toReport" class="report-button">
					<view class="button-desc">
						<view class="zh-text">
							投诉举报
						</view>
						<view class="en-text">
							REPOERTCOMPLAINTS
						</view>
					</view>
					<image :src="reportImage"></image>
				</view>
				<view @click="toMyReport" class="report-button">
					<view class="button-desc">
						<view class="zh-text">
							我的举报
						</view>
						<view class="en-text">
							MY REPORT
						</view>
					</view>
					<image :src="wodejubaoImage"></image>
				</view>
			</template>
			<template v-else-if="type && type=='record'">
				<view @click="toRecordApply" class="report-button">
					<view class="button-desc">
						<view class="zh-text">
							备案申请
						</view>
						<view class="en-text">
							RECORD APPLY
						</view>
					</view>
					<image :src="applyImage"></image>
				</view>
				<view @click="toMyRecode" class="report-button">
					<view class="button-desc">
						<view class="zh-text">
							我的备案
						</view>
						<view class="en-text">
							MY RECORD APPLY
						</view>
					</view>
					<image :src="yanshouImage"></image>
				</view>
			</template>

			<template v-else-if="type && type=='acceptance'">
				<view @click="toAcceptanceApply" class="report-button">
					<view class="button-desc">
						<view class="zh-text">
							验收申请
						</view>
						<view class="en-text">
							ACCEPTANCE APPLY
						</view>
					</view>
					<image :src="applyImage"></image>
				</view>
				<view @click="toMyAcceptance" class="report-button">
					<view class="button-desc">
						<view class="zh-text">
							我的验收
						</view>
						<view class="en-text">
							MY ACCEPTANCE
						</view>
					</view>
					<image :src="yanshouImage"></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import reportImage from 'static/report/tousujubao.png'
	import wodejubaoImage from 'static/report/wodejubao.png'
	import applyImage from 'static/report/shenqing.png'
	import yanshouImage from 'static/report/yanshou.png'
	import gonggaoImage from 'static/report/gonggao.png'
	import xianchangjianchaImage from 'static/report/xianchangjiancha.png'
	export default {
		data() {
			return {
				reportImage,
				wodejubaoImage,
				applyImage,
				yanshouImage,
				gonggaoImage,
				xianchangjianchaImage,
				type: null,
				proType: null //1: 小型工程; 2: 零星作业

			}
		},
		onLoad(e) {
			this.type = e.type
			this.proType = e.proType
			uni.setNavigationBarTitle({
				title: this.getTitle()
			})
		},
		methods: {
			toReport() {
				uni.navigateTo({
					url: '../to_report/to_report'
				})
			},
			
			toMyReport() {
				uni.navigateTo({
					url: '../MyReport/MyReport'
				})
			},
			
			toRecordApply() {
				let _url = ''
				switch (+this.proType) {
					case 1:
						_url = '../xxgc/record'
						break;
					case 2:
						_url = '../lxzy/record'
						break;
				}
				uni.navigateTo({
					url: _url
				})
			},
			
			toMyRecode() {
				let _url = ''
				switch (+this.proType) {
					case 1:
						_url = '../xxgc/my_record'
						break;
					case 2:
						_url = '../lxzy/my_record'
						break;
				}
				uni.navigateTo({
					url: _url
				})
			},
			
			toAcceptanceApply() {
				let _url = ''
				switch (+this.proType) {
					case 1:
						_url = '../xxgc/my_record?type=acceptance'
						break;
					case 2:
						_url = '../lxzy/my_record?type=acceptance'
						break;
				}
				uni.navigateTo({
					url: _url
				})
			},
			
			toMyAcceptance() {
				let _url = ''
				switch (+this.proType) {
					case 1:
						_url = '../xxgc/my_acceptance'
						break;
					case 2:
						_url = '../lxzy/my_acceptance'
						break;
				}
				uni.navigateTo({
					url: _url
				})
			},
			
			getTitle() {
				switch (this.type) {
					case 'record':
						return `${this.proType == 1 ? '小型工程' : this.proType == 2 ? '零星作业' : ''}备案信息`
					case 'acceptance':
						return `${this.proType == 1 ? '小型工程' : this.proType == 2 ? '零星作业' : ''}验收信息`
					default:
						return '投诉举报'
				}
			}
		}
	}
</script>

<style lang="scss">
	.report-container {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.report-button-group {
			margin-top: 49rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.report-button {
				width: 723rpx;
				height: 234rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.button-desc {
					position: absolute;
					top: 56rpx;
					left: 231rpx;
					text-align: left;

					.zh-text {
						font-size: 36rpx;
						font-weight: 500;
						line-height: 54rpx;
						color: #FFFFFF;
					}

					.en-text {
						font-size: 25rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
